<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="50">
				<el-col :span="20">
					<el-input
						placeholder="请输入内容"
						clearable
						v-model="queryInfo.query"
						@clear="getGoodsList"
					>
						<el-button
							slot="append"
							icon="el-icon-search"
							@click="getGoodsList"
						></el-button> </el-input
				></el-col>
				<el-col :span="4">
					<el-button type="primary" @click="goAddPage"> 添加商品 </el-button>
				</el-col>
			</el-row>
			<!-- table表格 -->
			<el-table :data="goodsList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="商品名称" prop="goods_name"></el-table-column>
				<el-table-column
					label="商品价格(元)"
					prop="goods_price"
					width="90px"
				></el-table-column>
				<el-table-column
					label="商品重量"
					prop="goods_weight"
					width="70px"
				></el-table-column>
				<el-table-column label="创建时间" prop="add_time" width="140px">
					<template slot-scope="scope">
						{{ scope.row.add_time | dateFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="130px">
					<template slot-scope="scope">
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="mini"
							@click="showEditDialog(scope.row.goods_id)"
						></el-button>
						<!-- 删除按钮 -->
						<el-button
							type="danger"
							icon="el-icon-delete"
							size="mini"
							@click="removeById(scope.row.goods_id)"
						></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				background
			>
			</el-pagination>
		</el-card>
		<el-dialog title="编辑" :visible.sync="editDialogVisible" width="50%">
			<el-form
				:model="editForm"
				:rules="editFormRules"
				ref="editFormRef"
				label-width="100px"
			>
				<el-form-item label="商品名称" prop="goods_name">
					<el-input v-model="editForm.goods_name" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品价格" prop="goods_price">
					<el-input v-model="editForm.goods_price" type="number"></el-input>
				</el-form-item>
				<el-form-item label="商品重量" prop="goods_weight">
					<el-input v-model="editForm.goods_weight" type="number"></el-input>
				</el-form-item>
				<el-form-item label="商品数量" prop="goods_number">
					<el-input v-model="editForm.goods_number" type="number"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 10,
			},
			goodsList: [],
			total: 0,
			editDialogVisible: false,
			editForm: {},
			editFormRules: {
				goods_name: [
					{
						required: true,
						message: '请输入商品名称',
						trigger: 'blur',
					},
				],
				goods_price: [
					{
						required: true,
						message: '请输入商品价格',
						trigger: 'blur',
					},
				],
				goods_weight: [
					{
						required: true,
						message: '请输入商品重量',
						trigger: 'blur',
					},
				],
				goods_number: [
					{
						required: true,
						message: '请输入商品数量',
						trigger: 'blur',
					},
				],
			}
		}
	},
	created() {
		this.getGoodsList()
	},
	methods: {
		//获取商品列表
		async getGoodsList() {
			const { data: res } = await this.$http.get('goods', {
				params: this.queryInfo,
			})
			if (res.meta.status != 200) {
				return this.$message.error('获取商品列表失败')
			}
			this.goodsList = res.data.goods
			this.total = res.data.total
		},
		handleSizeChange(newSize) {
			this.queryInfo.pagesize = newSize
			this.getGoodsList()
		},
		handleCurrentChange(newPage) {
			this.queryInfo.pagenum = newPage
			this.getGoodsList()
		},
		// 删除商品
		async removeById(id) {
			const confirmResult = await this.$confirm(
				'此操作将永久删除该商品, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).catch((err) => err)
			if (confirmResult != 'confirm') {
				return this.$message.info('已取消删除')
			}
			const { data: res } = await this.$http.delete(`goods/${id}`)
			if (res.meta.status != 200) {
				return this.$message.error('删除失败')
			}
			this.getGoodsList()
			this.$message.success('删除成功')
		},
		//添加商品
		goAddPage() {
			//路由跳转
			this.$router.push(`/goods/add`)
		},
		//编辑商品
		async showEditDialog(id) {
			const { data: res } = await this.$http.get(`goods/${id}`)
			if (res.meta.status != 200) {
				return this.$message.error('查询用户信息失败')
			}
			this.editForm = res.data
			this.editDialogVisible = true
		},
		editInfo() {
			this.$refs.editFormRef.validate(async (valid) => {
				if (!valid) return
				const { data: res } = await this.$http.put(
					`goods/${this.editForm.goods_id}`,
					{
						goods_name: this.editForm.goods_name,
						goods_price: this.editForm.goods_price,
						goods_number: this.editForm.goods_number,
						goods_weight: this.editForm.goods_weight,
						goods_introduce: this.editForm.goods_introduce,
						pics: this.editForm.pics,
						attrs: this.editForm.attrs,
						goods_cat: this.editForm.goods_cat
					}
				)
				if (res.meta.status != 200) {
					return this.$message.error('修改商品信息失败')
				}
				this.editDialogVisible = false
				this.$message.success('修改成功')
				this.getGoodsList()
			})
		},
	},
}
</script>
<style lang="less" scoped></style>
